<template>
  <div>
    <vue3VideoPlay class="basic-player-wrapper"
      title="钢铁侠"
      :src="options.src"
      :poster="options.poster"
      :type="options.type"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeupdate"
      @canplay="onCanplay"/>
  </div>
</template>

<script setup>
import { reactive} from 'vue'
import 'vue3-video-play/dist/style.css'
import vue3VideoPlay from 'vue3-video-play'

const options = reactive({
  // src:"https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4",//
  src:"https://s1.bfllvip.com/video/zhongyiliansaiguangxilanhangVSwenzhoujulebu20250322/HD/index.m3u8",//
  // src:"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",//
  poster:'',//封面
  type: ''
})

const onPlay= (ev)=>{
  console.log(ev,'播放')
}
const onPause= (ev)=> {
  console.log(ev,'暂停')
}
const onTimeupdate= (ev)=> {
  console.log(ev,'播放时间')
}
const onCanplay= (ev)=> {
  console.log(ev,'可以播放')
}





</script>

<style scoped lang="scss">
 .d-player-wrap{
    width: 100%;
   height: 100%;
  }
</style>
